<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>简历 | 焦双亮</title>
  <link rel="stylesheet" href="main?_inline">
  <link rel="stylesheet" href="style.css">
  <base target="_blank">
</head>
<body>
<p class="last-modified">最后更新于2018年2月</p>
<a class="download-pdf" href="./焦双亮_前端开发工程师.pdf">下载 PDF</a>

<main class="content">

  <!--基本信息-->
  <header class="content-hd">
    <section class="title">
      <div class="name">
        <h1>焦双亮</h1>
      </div>
      <div class="job">
        <h2>Web前端开发工程师</h2>
      </div>
    </section>
    <section class="info">
      <ul>
        <li>男 / 1992.09</li>
        <li>平顶山学院 · 计算机科学与技术</li>
        <li>本科 / 2016年毕业</li>
      </ul>
    </section>
    <section class="contact">
      <ul>
        <li>
          <a href="http://jiaosl.com">
            <span class="contact-link">技术博客</span>
            <span class="iconfont">
              <svg width="16px" height="16px" viewBox="0 0 1024 1024">
              <path
                d="M512 42.581333l-469.333333 469.333333 31.146667 31.146667L170.666667 446.250667l0 438.186667 682.666667 0L853.333333 446.208l96.853333 96.896 31.146667-31.146667L512 42.581333zM426.666667 841.770667l0-298.666667 170.666667 0 0 298.666667L426.666667 841.770667zM810.666667 841.770667l-170.666667 0 0-341.333333L384 500.437333l0 341.333333L213.333333 841.770667 213.333333 403.584l298.666667-298.666667 298.666667 298.666667L810.666667 841.770667z"></path>
              </svg>
            </span>
          </a>
        </li>
        <!-- <li>
          <a href="https://github.com/jiaosl">
            <span class="contact-link">gwuhaolin</span>
            <span class="iconfont">
              <svg width="16px" height="16px" viewBox="0 0 1024 1024">
                <path
                  d="M941.714 512q0 143.433-83.712 258.011t-216.283 158.574q-15.433 2.853-22.565-3.986t-7.131-17.152v-120.576q0-55.442-29.696-81.152 32.585-3.438 58.587-10.277t53.723-22.272 46.299-37.998 30.281-60.014 11.703-86.016q0-69.157-45.129-117.723 21.138-52.005-4.571-116.553-16.018-5.157-46.299 6.29t-52.553 25.161l-21.723 13.714q-53.138-14.848-109.714-14.848t-109.714 14.848q-9.143-6.29-24.283-15.433t-47.726-22.016-49.152-7.717q-25.161 64.585-3.986 116.553-45.129 48.567-45.129 117.723 0 48.567 11.703 85.723t29.989 60.014 46.007 38.29 53.723 22.272 58.587 10.277q-22.857 20.553-28.014 58.843-11.995 5.705-25.71 8.558t-32.585 2.853-37.413-12.288-31.707-35.73q-10.862-18.286-27.721-29.696t-28.27-13.714l-11.447-1.719q-11.995 0-16.567 2.56t-2.853 6.583 5.157 8.009 7.424 6.839l3.986 2.853q12.581 5.705 24.869 21.723t17.993 29.147l5.705 13.129q7.424 21.723 25.161 35.145t38.29 17.152 39.717 3.986 31.707-2.011l13.129-2.304q0 21.723 0.293 50.871t0.293 30.866q0 10.277-7.424 17.152t-22.857 3.986q-132.571-43.995-216.283-158.574t-83.712-258.011q0-119.442 58.843-220.27t159.707-159.707 220.27-58.843 220.27 58.843 159.707 159.707 58.843 220.27z"></path>
              </svg>
            </span>
          </a>
        </li> -->
        <li>
          <a href="mailto:jsl1992@163.com">
            <span class="contact-link">jsl1992@163.com</span>
            <span class="iconfont">
              <svg width="16px" height="16px" viewBox="0 0 1024 1024">
                <path
                  d="M903.808 239.04l-818.304 0 0 545.92 852.992 0 0-545.92-34.688 0zM869.664 273.152l-329.536 329.536c-15.04 15.04-41.248 15.04-56.288 0l-329.6-329.536 715.392 0zM119.616 286.752l221.536 221.504-221.536 221.536 0-443.072zM146.848 750.848l218.464-218.432 94.432 94.4c13.952 13.952 32.512 21.664 52.256 21.664s38.304-7.712 52.256-21.664l94.432-94.432 218.432 218.432-730.304 0zM904.384 729.824l-221.536-221.568 221.536-221.568 0 443.136z"></path>
              </svg>
            </span>
          </a>
        </li>
        <li>
          <a href="tel:17601234358">
            <span class="contact-link">17601234358</span>
            <span class="iconfont">
              <svg width="16px" height="16px" viewBox="0 0 1024 1024">
                <path
                  d="M256 1024l512 0c26.464 0 48-21.536 48-48l0-928c0-26.464-21.536-48-48-48l-512 0c-26.464 0-48 21.536-48 48l0 928c0 26.464 21.536 48 48 48zM240 48c0-8.832 7.168-16 16-16l512 0c8.832 0 16 7.168 16 16l0 928c0 8.832-7.168 16-16 16l-512 0c-8.832 0-16-7.168-16-16l0-928zM288 864l448 0c8.832 0 16-7.168 16-16l0-672c0-8.832-7.168-16-16-16l-448 0c-8.832 0-16 7.168-16 16l0 672c0 8.832 7.168 16 16 16zM304 192l416 0 0 640-416 0 0-640zM496 928c0 17.664 14.336 32 32 32s32-14.336 32-32c0-17.664-14.336-32-32-32-17.664 0-32 14.336-32 32zM448 128l128 0c8.832 0 16-7.168 16-16s-7.168-16-16-16l-128 0c-8.832 0-16 7.168-16 16s7.168 16 16 16z"></path>
              </svg>
            </span>
          </a>
        </li>
      </ul>
    </section>
  </header>

  <div class="content-bd">
    <p>在线简历: <a href="http://resume.jiaosl.com">resume.jiaosl.com</a></p>
    <div class="content-left">

      <section class="practice">
        <header class="section-hd">
          <span class="section-title-l"></span>
          <h2 class="section-title">经历</h2>
          <span class="section-title-r"></span>
        </header>
        <div class="section-bd">

          <!--经历:工作-->
          <div class="item">
            <header class="item-hd">
              <h3 class="item-name">人人视频(上海)</h3>
              <span class="item-time">2016.07 - 至今</span>
              <a class="btn item-more" href="http://rr.tv">工作</a>
            </header>
            <div class="item-bd">
              <ul class="section-content">
                <li>负责微信小程序设计及研发</li>
                <li>负责公司主站(移动/PC)开发与维护</li>
                <li>负责app内嵌页面开发</li>
                <li>负责部分节日活动开发</li>
                <li>负责微信分享页面开发</li>
              </ul>
            </div>
          </div>
          <div class="item">
            <header class="item-hd">
              <h3 class="item-name">上海墅假网络科技有限公司(上海)</h3>
              <span class="item-time">2015.07 至 2016.06</span>
              <a class="btn item-more" href="http://www.senseluxury.com/">工作</a>
            </header>
            <div class="item-bd">
              <ul class="section-content">
                <li>负责公司主站的开发与维护</li>
                <li>活动页面的开发</li>
                <li>微信场景开发</li>
              </ul>
            </div>
          </div>

          <!--经历:在校-->
          <div class="item">
            <header class="item-hd">
              <h3 class="item-name">联创创业平台</h3>
              <span class="item-time">2012.09 ~ 2015.06</span>
              <a class="btn item-more">在校</a>
            </header>
            <div class="item-bd">
              <p class="item-des">在校期间创建工作室，担任技术总监主导和带领同学创业，其中包括：</p>
              <ul class="section-content">
                <li><a>阿饭提送餐</a> 校内第一支校园外卖团队</li>
                <li><a>皇家大平院微信公众平台</a> 校内最大的非官方微信公众平台</li>
              </ul>
              <p style='margin-top:10px;'>校内创业虽然不能算得上成功,却也是我人生中比较重要的时段,不仅使我在技术方面有很大的提升,同时让我有了一份不一样的阅历.</p>
            </div>
          </div>
        </div>

      </section>

      

    </div>


    <div class="content-right">
      <section class="skill">
        <header class="section-hd">
          <span class="section-title-l"></span>
          <h2 class="section-title">技能</h2>
          <span class="section-title-r"></span>
        </header>
        <div class="section-bd">

          <!--技能:JS-->
          <div class="item">
            <header class="item-hd">
              <span class="item-time">Web</span>
              <a class="btn item-more">精通</a>
            </header>
            <div class="item-bd">
              <ul class="section-content">
                <li>精通HTML(5)+CSS(3),以及解决常用浏览器的适配及兼容性问题;</li>
                <li>精通javaScript，ES6;</li>
                <li>精通微信小程序开发;</li>
                <li>熟练使用vue全家桶;</li>
                <li>熟练使用css预编译语言sass;</li>
                <li>熟练使用bootstrap，elementUI，mintUI，jQueryUI等UI框架;</li>
                <li>熟练使用jQuery， jQuery Moblie， Swiper，flexslider等js库和插件;</li>
                <li>熟练使用git和svn版本管理工具；</li>
                <li>熟练使用webpack管理和打包项目;</li>
                <li>熟练使用图片处理工具Photoshop和Fireworks;</li>
                <li>熟悉敏捷开发,并应用在实际项目中(Scrum);</li>
                <li>熟悉nodejs开发;</li>
                <li>熟练使用egg.js开发后端项目;</li>
                <li>熟练使用非关系型数据库mongoDB;</li>
                <li>熟悉RESTful相关规范;</li>
                <li>熟悉nginx等相关;</li>
                <li>熟悉docker相关的运用;</li>
              </ul>
            </div>
          </div>
        </div>
      </section>
    </div>
    
  </div>
  <!-- 项目部分 -->
  <div class="content-bd">
      <header class="section-hd">
          <span class="section-title-l"></span>
          <h2 class="section-title">项目</h2>
          <span class="section-title-r"></span>
        </header>
    <div class="content-left">
      <section class="project">
        <div class="section-bd">
          <!--项目:rr.tv-->
          <div class="item">
            <header class="item-hd">
              <a class="btn item-more" href="http://rr.tv">人人视频PC主站</a>
            </header>
            <div class="item-bd">
              <ul>
                <li><a>开发周期:</a> 2017.03 - 2017.04</li>
                <li><a>介绍:</a> 人人视频第一个视频播放主站</li>
                <li><a>功能</a>: 人人视频是国内最大的海外视频社区，长期致力于为喜爱海外文化的用户提供资讯阅读、短视频观看和社区讨论的平台,其主要功能是宣传播放人人视频app内各类短视频</li>
                <li><a>技术栈:</a> vue2 + vue-router + vue-cli + es6 + axios + webpack + babel + pug + sass + videojs</li>
              </ul>
              <div class='showImg'>
                <img onclick='showBigImg()' src="http://img.rr.tv/fe/20180302/o_1519922574847.png" alt="">
                <img onclick='showBigImg()' src="http://img.rr.tv/fe/20180302/o_1519923002138.jpg" alt="">
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="skill">
          <div class="section-bd">
            <!--项目:rr.tv-->
            <div class="item">
                <header class="item-hd">
                  <a class="btn item-more">app内嵌h5</a>
                </header>
                <div class="item-bd">
                  <ul>
                    <li><a>开发周期:</a> 2016.07 - 至今迭代</li>
                    <li><a>介绍:</a> app内嵌页面,也是作为app的重要一部分</li>
                    <li><a>功能</a>: 配合客户端使app更灵活迭代和修复问题</li>
                    <li><a>技术栈:</a> vue2 + vue-router + ES6 + axios + webpack + babel + pug</li>
                  </ul>
                  <div class='showImg vertical'>
                    <img onclick='showBigImg()' src="http://img.rr.tv/fe/20180302/o_1519925338454.jpg" alt="">
                    <img onclick='showBigImg()' src="http://img.rr.tv/fe/20180302/o_1519925365923.jpg" alt="">
                  </div>
                </div>
              </div>
          </div>
        </section>
        <section class="skill">
            <div class="section-bd">
              <!--项目:rr.tv-->
              <div class="item">
                  <header class="item-hd">
                    <a class="btn item-more">人人商城系统</a>
                  </header>
                  <div class="item-bd">
                    <ul>
                      <li><a>开发周期:</a> 2017.06 - 2017.07</li>
                      <li><a>介绍:</a> 为人人视频用户提供的一套在线周边商城</li>
                      <li><a>功能</a>: 实现一套完备的商品购物流程,用户可以通过积分,银币等兑换美剧周边</li>
                      <li><a>技术栈:</a> vue2 + vue-router + vuex +  ES6 + axios + webpack + babel + pug</li>
                    </ul>
                    <div class='showImg vertical'>
                      <img onclick='showBigImg()' src="http://img.rr.tv/fe/20180302/o_1519926239968.jpg" alt="">
                      <img onclick='showBigImg()' src="http://img.rr.tv/fe/20180302/o_1519926265081.jpg" alt="">
                    </div>
                  </div>
                </div>
            </div>
          </section>
    </div>
    <div class="content-right">
        <section class="skill">
          <div class="section-bd">
            <!--项目:rr.tv-->
            <div class="item">
                <header class="item-hd">
                  <a class="btn item-more" href="https://mobile.rr.tv/m/zuixin.html">人人视频m站</a>
                </header>
                <div class="item-bd">
                  <ul>
                    <li><a>开发周期:</a> 2016.11 - 2016.12</li>
                    <li><a>介绍:</a> 类似人人视频app的一个简化webapp</li>
                    <li><a>功能</a>: 主要为人人视频app做宣传和导流</li>
                    <li><a>技术栈:</a> jquery + jqueryUI + video.js</li>
                  </ul>
                  <div class='showImg vertical'>
                    <img onclick='showBigImg()' src="http://img.rr.tv/fe/20180302/o_1519924554356.jpg" alt="">
                    <img onclick='showBigImg()' src="http://img.rr.tv/fe/20180302/o_1519924586727.png" alt="">
                  </div>
                </div>
              </div>
          </div>
        </section>
        <section class="skill">
            <div class="section-bd">
              <!--项目:rr.tv-->
              <div class="item">
                  <header class="item-hd">
                    <a class="btn item-more">各种节日活动</a>
                  </header>
                  <div class="item-bd">
                    <ul>
                      <li><a>介绍:</a> 各种以节日为主题的活动</li>
                      <li><a>功能</a>: 通过节日活动带动日活,增加用户粘度,以及利用一些日常任务达到商业变现的目的</li>
                      <li><a>技术栈:</a> vue2 + vue-router + vuex + ES6 + axios + webpack + babel + pug</li>
                    </ul>
                    <div class='showImg vertical'>
                      <img onclick='showBigImg()' src="http://img.rr.tv/fe/20180302/o_1519925695045.png" alt="">
                      <img onclick='showBigImg()' src="http://img.rr.tv/fe/20180302/o_1519925748459.png" alt="">
                      <img onclick='showBigImg()' src="http://img.rr.tv/fe/20180302/o_1519925775152.jpg" alt="">
                      <img onclick='showBigImg()' src="http://img.rr.tv/fe/20180302/o_1519925794985.jpg" alt="">
                    </div>
                  </div>
                </div>
            </div>
          </section>
          <section class="skill">
              <div class="section-bd">
                <!--项目:rr.tv-->
                <div class="item">
                    <header class="item-hd">
                      <a class="btn item-more">超级管理平台</a>
                    </header>
                    <div class="item-bd">
                      <ul>
                        <li><a>介绍:</a> 为公司运营提供可视化操作的管理平台</li>
                        <li><a>功能</a>: 通过技术手段帮助运营和市场实现管理用户,管理视频,编辑视频,在线抓取视频等功能</li>
                        <li><a>技术栈:</a> vue2 + vue-router + elementUI +  axios + webpack + moment.js + lodash</li>
                      </ul>
                    </div>
                  </div>
              </div>
            </section>
            <section class="skill">
                <div class="section-bd">
                  <!--项目:rr.tv-->
                  <div class="item">
                      <header class="item-hd">
                        <a class="btn item-more">第六感全球短租官网</a>
                      </header>
                      <div class="item-bd">
                        <ul>
                          <li><a>介绍:</a> 第六感，全球值得信赖的精品别墅和公寓短租平台</li>
                          <li><a>功能</a>: 主要为国内用户提供全球短租和相关旅游信息查询和订购服务</li>
                          <li><a>技术栈:</a> html5 + css3 + jquery</li>
                        </ul>
                      </div>
                    </div>
                </div>
              </section>
      </div>
  </div>
</main>
<div id='blackBg' class="blackBg" onclick='hideImg()' style='display: none;'>
  <img id='currentImg' src="http://img.rr.tv/fe/20180302/o_1519925794985.jpg" alt="">
</div>
<script>
  function showBigImg () {
    console.log(event, event.srcElement.currentSrc)
    document.getElementById('currentImg').src = event.srcElement.currentSrc
    document.getElementById('blackBg').style.display = 'block'
  }
  function hideImg () {
    document.getElementById('blackBg').style.display = 'none'
  }
</script>
<!-- <footer class="github-footer">
  <a class="footer-link" href="https://github.com/gwuhaolin/resume">Host On Github</a>
</footer> -->
</body>
</html>
